<template>
	<view class="content">
		<view class="ffffff">
			<u-tabs :list="tabList" @click="tabChage" lineWidth="40rpx" keyName="title" lineColor="rgba(255, 184, 0, 1)"
				:activeStyle="{
			  color: '#000000',
			  fontWeight: 800,
			  transform: 'scale(1.05)'}" :inactiveStyle="{
			  color: '#666666',
			     fontWeight: 800,
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
		</view>
		<view class="mainpadding">
			<view></view>
			<view class="mainpadding ffffff border2 margin_bottom" v-for="item in list.data" :key="item.id"
				@click="jumpurl('/pages_goodsOrder/runErranddetail?id=',item.id)">
				<view class="flexbetween margin_bottom padding_bottom line_bottom">
					<!-- <view>
						<view class="flexleft">
							<view class="text_ft color_red margin_right2">#563</view>
							<view class="text_e color_zero">剩50分钟</view>
						</view>
						<view class="flexleft">
							<view class="buyBox margin_right2">幫買</view>
							
						</view>
						<view>
							<view class="takeBox">幫取</view>
						</view>
					</view> -->
					<view class="text_e color_theme" v-if="item.df_money">預估墊付${{item.df_money}}</view>
					<view class="text_ft color_red">${{item.z_money}}</view>
				</view>
				<view class="flexbetween">
					<view class="flex">
						<view class="textcenter margin_right2">
							<image class="imgBox" src="/static/images/index/take.png" mode=""></image>
							<view class="text_a color_zero">2.3</view>
							<view class="text_a color_nine">km</view>
						</view>
						<view style="width: 500rpx;">
							<view class="text_ft color_three">{{item.to_name}}</view>
							<view class="text_d color_nine margin_top2">{{item.to_address}}</view>
						</view>
					</view>
					<image class="navigationBox" src="/static/images/goodsOrder/navigation.png" mode=""></image>
				</view>
				<image class="fromImg " src="/static/images/index/from.png" mode=""></image>
				<view class="flexbetween">
					<view class="flex">
						<view class="textcenter margin_right2">
							<image class="imgBox" src="/static/images/index/deliver.png" mode=""></image>
							<view class="text_a color_zero">2.3</view>
							<view class="text_a color_nine">km</view>
						</view>
						<view style="width: 500rpx;">
							<view class="text_ft color_three">{{item.go_name}}</view>
							<view class="text_d color_nine margin_top2">{{item.go_address}}</view>
						</view>
					</view>
					<image class="navigationBox" src="/static/images/goodsOrder/navigation.png" mode=""></image>
				</view>
				<view class="flexleft margin_top">
					<view class="specBox margin_right2" v-if="item.goods_kg">{{item.goods_kg}}kg</view>
					<view class="specBox" v-if="item.chang || item.kuan || item.gao">{{item.chang || 0}} *
						{{item.kuan || 0}} * {{item.gao || 0}}</view>
				</view>
				<!-- 備注 -->
				<view class="notes margin_top mainpadding text_c color_six">{{item.bei}}</view>
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(ite,index) in item.images_arr" :key="index">
						<!-- 已上傳 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="ite" mode=""></image>
						</view>
					</view>
				</view>
				<template v-if="item.status==1">
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<!-- <view class="textcenter margin_right5">
								<image class="phoneImg" src="/static/images/goodsOrder/on_line.png" mode=""></image>
								<view class="text_b color_six">在线</view>
							</view> -->
							<!-- <view class="textcenter margin_right5">
								<image class="phoneImg" src="/static/images/goodsOrder/phone.png" mode=""></image>
								<view class="text_b color_six">客戶</view>
							</view> -->
							<view class="textcenter margin_right5" @click.stop="callphone(item.to_phone)">
								<u-icon name="phone" color="#333" size="24"></u-icon>
								<view class="text_b color_six">取货</view>
							</view>
							<view class="textcenter margin_right5" @click.stop="callphone(item.to_phone)">
								<u-icon name="phone" color="#333" size="24"></u-icon>
								<view class="text_b color_six">送货</view>
							</view>
						</view>

						<view class="yellowBtn flex1" v-if="item.is_run==1"
							@click.stop="show=true;upflag=1;listid=item.id;">拍照取貨</view>
						<view class="yellowBtn flex1" v-if="item.is_run==2"
							@click.stop="show=true;upflag=2;listid=item.id;">拍照送達</view>
						<view class="huibtn flex1" v-if="item.is_run==3 && item.status==1">待確認</view>
					</view>
				</template>

			</view>
		</view>
		<u-modal :show="show" title="拍照上傳" confirmColor="#ffb800" confirmText="確認" @confirm="upconfirm" cancelText="取消"
			@cancel="show=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上傳 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(4,images,images_text)"
						v-if="images.length<4"><!-- 未上傳 -->
						<image class="listleftimg1 radius" src="@/static/images/mine/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsId: "1,2,3,99",
				tabList: [{
					title: "全部",
					id: "1,2,3,99"
				}, {
					title: "待取貨",
					id: "1"
				}, {
					title: "配送中",
					id: "2"
				}, {
					title: "待確認",
					id: "3"
				}, {
					title: "已完成",
					id: "99"
				}],
				list: {
					data: []
				},
				show: false,
				images: [],
				images_text: [],
				upflag: 0, //1拍照取貨，2拍照送達
				listid: "",
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			tabChage(e) {
				this.tabsId = e.id
				this.getList()
			},
			async getList() { //訂單列表
				let _this = this
				let res = await this.http.request('/api/Goods/orderrunmylist', 'POST', {
					takeaway_id: uni.getStorageSync("takeaway_id"),
					status: this.tabsId
				})
				if (res.code == 1) {
					res.data.forEach(item => {
						let images_arr = []
						if (item.images) {
							let arr2 = item.images.split(",")
							arr2.forEach(ite => {
								let text = this.imgUrlUser + ite
								images_arr.push(text)
							})
							this.$set(item, "images_arr", images_arr)
						}
					})
					this.list.data = res.data
					console.log(this.list.data)
				} else if (res.code == 0) {
					this.list.data = []
					this.http.toast(res.msg)
				} else {
					this.http.toast('網絡開小差啦');
				}
			},
			upconfirm() {
				if (this.images.length == 0) {
					this.http.toast("請上傳圖片！")
					return false
				}
				this.show = false
				let url = "/api/goods/orderrunpz"
				let data = {
					id: this.listid,
					pzqh_image: this.images.join()
				}
				if (this.upflag == 2) {
					url = "/api/goods/orderrunsd"
					data = {
						id: this.listid,
						pzsd_image: this.images.join()
					}
				}
				this.http.request(url, 'POST', data).then(res => {
					this.http.toast(res.msg)
					if (res.code == 1) {
						this.images = []
						this.images_text = []
						this.getList()
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上傳圖片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				this.http.chooseImage(num, ['camera']).then(res => {
					for (var i = 0; i < res.length; i++) {
						_this.uploadImageService(res[i], upImgs, upImgs_text)
					}
				}).catch(err => {});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	/deep/.u-tabs {
		padding: 0 20rpx;
	}

	.listleftimg1 {
		width: 120rpx;
		height: 120rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.imgBox {
		width: 40rpx;
		min-width: 40rpx;
		height: 40rpx;
	}

	.fromImg {
		width: 9rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}

	.navigationBox {
		width: 58rpx;
		min-width: 58rpx;
		height: 58rpx;
	}

	.notes {
		background: #F5F6FA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.specBox {
		padding: 10rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 1rpx solid #FF8505;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.phoneImg {
		width: 38rpx;
		height: 38rpx;
	}

	.popupBox {
		width: 583rpx;
		padding-top: 50rpx;

		.imageBox {
			width: 505rpx;
			height: 228rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1rpx solid #DFDFDF;
			margin: 100rpx auto;
		}

		.copy {
			width: 100%;
			text-align: center;
			padding: 30rpx 0;
			background-color: rgba(255, 184, 0, 1);
			margin-top: 90rpx;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.item_image_box {
			width: 33.33%;
		}

		.item_image {
			position: relative;
			width: 160rpx;
			height: 160rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>